import React, { PureComponent, Component } from 'react'
import { connect } from 'dva'
import {
  Row,
  Col,
  Input,
  Form,
  DatePicker,
  Space,
  Table,
  Button,
  Modal,
  Switch,
  message,
  TreeSelect,
  Spin,
  Select
} from 'antd';
const { Option } = Select
const { confirm } = Modal;
import { SearchOutlined, ReloadOutlined,EditOutlined ,DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import { listPost,delPost } from "@/api/system/post";
import { handleTree } from '@/utils/ruoyi.js'

import AddPost from '@/components/post/AddPost.js'
import EditPost from '@/components/post/editPost.js'


class SystemPost extends PureComponent {
  formRef = React.createRef();
  state = {
    loading: true,
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      postCode: undefined,
      postName: undefined,
      status: undefined
    },
    // 岗位表格数据
     postList: [],
     addVisible:false,
     postId:null,
     editVisible:false,
     record:null
  }

  componentWillMount(){
    this.getlist()
  }

  getlist=()=>{    //获取系统数据
    this.setState({
      loading:true
    })
    listPost(this.state.queryParams).then(res => {
      if(res.code==200){
        this.setState({
          postList:res.rows,
          loading:false
        })
      }
    })
  }
  //显示增加菜单弹框
  addVisible=()=>{
    this.setState({
      addVisible:true
    })
  }
  //关闭增加菜单弹框
  addonCancel=()=>{
    this.setState({
      addVisible:false
    })
  }
  //修改菜单弹框
  editMenuVisible=(status,record)=>{
    this.setState({
      postId:record.postId,
      editVisible:true,
      record:record
    })

  }
  editonCanCel=()=>{
    this.setState({
      editVisible:false
    })
  }

  //搜索
  onFinish=values=>{
    this.setState({
      queryParams:{
        ...this.state.queryParams,
        ...values
      }
    })

    console.log(values)

    this.getlist()
  }
    //重置
    Reload = () => {
      this.formRef.current.resetFields()

      this.setState({
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          postCode: undefined,
          postName: undefined,
          status: undefined
        },
      },()=>{
        this.getlist()
      })
    }


  render() {
    const {postList,addVisible,editVisible,postId}=this.state
    const that=this


    const columns = [
      { title: '岗位编号', dataIndex: 'postId',key:'postId'},
      { title: '岗位编码', dataIndex: 'postCode',key:'postCode' },
      { title: '岗位名称', dataIndex: 'postName', key:'postName'},
      { title: '岗位排序', dataIndex: 'postSort',key:'postSort' },
      { title: '状态', dataIndex: 'status',render: (status, record) => (
        <>
          {record.status=="0"?'正常':'停止'}
        </>
        ) },
      { title: '创建时间', dataIndex: 'createTime',key:'createTime' },
      { title: '操作', dataIndex: 'action',
      render: (status, record) => (
        <Space size="middle">
          <a onClick={() =>that.editMenuVisible(status,record)}>
            <EditOutlined />
            修改
          </a>
          <a
            onClick={status => {
              confirm({
                title: `是否确认删除岗位编号为${record.postId}职位吗?"`,
                icon: <ExclamationCircleOutlined />,
                cancelText: '取消',
                okText: '确定',
                onOk() {
                  delPost(record.postId).then(res => {
                    if (res.code == 500) {
                      return false;
                    } else if (res.code == 200) {
                      message.success('删除岗位编号成功');
                      that.getlist()
                    }
                  });
                },
                onCancel() {
                  message.warning('取消成功');
                },
              });
            }}
          >
            <DeleteOutlined />
            删除
          </a>
        </Space>
      ),

    },

    ];

    return (
      <>
        <Row gutter={24}>
          <Col xs={24}>
            <Form
            style={{ display: 'flex' }}
            onFinish={this.onFinish}
            ref={this.formRef}
            >
              <Form.Item label="岗位编码"
              style={{ marginRight: '20px' }}
              name="postCode"
              >
                <Input
                  style={{ width: '240px' }}
                  placeholder="请输入职位名称"
                />
              </Form.Item>

              <Form.Item label="岗位名称"
              style={{ marginRight: '20px' }}
              name="postName"
              >
                <Input
                  style={{ width: '240px' }}
                  placeholder="请输入岗位名称"
                />
              </Form.Item>

              <Form.Item label="状态"   name="status"
              style={{ marginRight: '20px' }}>
                <Select
                placeholder="岗位状态"
                style={{ width: '240px' }}
                >
                  <Option value={"0"}>正常</Option>
                  <Option value={"1"}>停用</Option>
                </Select>
              </Form.Item>
              <Button type="primary"
              style={{ marginRight: '20px' }}
               icon={<SearchOutlined />}
              htmlType="submit"
               >
                搜索
              </Button>
              <Button icon={<ReloadOutlined />} onClick={this.Reload}>
                重置
              </Button>
            </Form>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col>
            <Button type="primary" onClick={this.addVisible} >
              新增
            </Button>
          </Col>
        </Row>

          <Table
          columns={columns}
          dataSource={postList}
          rowKey={postList => postList.postId}
          defaultExpandAllRows
          >
        </Table>


        <AddPost
          visible={addVisible}
          onCancel={this.addonCancel}
          oninitList={this.getlist}
        ></AddPost>

      {
        postId!==null&&
        <EditPost
        visible={editVisible}
        onCancel={this.editonCanCel}
        oninitList={this.getlist}
        postId={postId}
        record={this.state.record}
      >
       </EditPost>
      }


      </>
    )
  }


}


export default SystemPost
